<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            height: 3000px;
        }

        div {
            display: none;
            overflow: scroll;
            margin: 100px;
            width: 200px;
            height: 200px;
            background-color: #cccccc;
        }
    </style>
</head>

<body>
    <div>
        向下滚动试试
        向下滚动试试
        向下滚动试试
        向下滚动试试
        向下滚动试试
        向下滚动试试
        向下滚动试试
        向下滚动试试
        向下滚动试试
        向下滚动试试
        向下滚动试试
        向下滚动试试
        向下滚动试试
        向下滚动试试
        向下滚动试试
        向下滚动试试
        向下滚动试试
        向下滚动试试
        向下滚动试试
        向下滚动试试
        向下滚动试试
        向下滚动试试
        向下滚动试试
        向下滚动试试
        向下滚动试试
        向下滚动试试
        向下滚动试试
        向下滚动试试
        向下滚动试试
        向下滚动试试
        向下滚动试试
        向下滚动试试
    </div>
    <script>
        const div = document.querySelector("div")
        document.documentElement.scrollTop = 100 // 设置初始滚动位置, 注意不要带单位
        // 为页面添加滚动事件监听
        window.addEventListener("scroll", function () {
            // console.log("页面滚动了")
            // document.documentElement表示html元素
            const scrollTop = document.documentElement.scrollTop
            console.log(scrollTop)
            // console.log(window.scrollY); // 与scrollTop等价
            if (scrollTop >= 100) {
                div.style.display = "block"
            } else {
                div.style.display = "none"
            }
        })

        // 为div添加滚动事件监听
        div.addEventListener("scroll", function () {
            // scrollTop属性表示元素内容向上滚动的像素值
            console.log(this.scrollTop);
        })
    </script>
</body>

</html>